<script setup>
	import {
		ref,
		reactive,
		defineEmits
	} from 'vue'
	const form = reactive({
		price: null,
		paytype: '',
	})
	const timer = ref(null)
	const second = ref(60)
	const isRefresh = ref(false)
	const isSubmitDisabled = ref(true)
	const isBalanceVisible = ref(true)
	const onSubmit = () => {
		console.log('submit!')
		dialogVisible.value = true
		getCode()
	}

	const getCode = () => {
		second.value = 10
		timer.value = setInterval(function() {
			if (second.value > 0) {
				second.value--;
			} else {
				clearInterval(timer.value);
				isRefresh.value = true
				timer.value = null;
			}
		}, 1000);
	}

	const refreshClick = () => {
		isRefresh.value = false
		second.value = 10
		getCode()
	}

	const changeInput = (val) => {
		if (val < 1 || form.paytype == '') {
			isSubmitDisabled.value = true
		} else {
			isSubmitDisabled.value = false
		}
	}

	const changeRadio = () => {
		if (form.price) {
			isSubmitDisabled.value = false
		} else {
			isSubmitDisabled.value = true
		}
	}

	const handleClose = () => {
		second.value = 60
		clearInterval(timer.value);
		isRefresh.value = false
		timer.value = null;
	}


	const toggleBalanceVisibility = () => {
		isBalanceVisible.value = !isBalanceVisible.value
	}
	const dialogVisible = ref(false)
	const emit = defineEmits(['switch-to-withdrawal'])
	const handleButtonClick = () => {
		emit('switch-to-withdrawal')
	}
</script>
<template>
	<div class="bs-panel">
		<div class="bs-panel-body">
			<div class="bs-panel_hd">
				<div class="bs-panel_tt bold">我的余额</div>
			</div>
			<div class="top-notice">
				<el-alert title="温馨提示：请勿与他人分享您的账户信息，确保您的交易安全。如因用户自身原因导致的账户被盗或损失，平台不承担任何责任" type="warning"
					show-icon></el-alert>
			</div>

			<el-form class="account-form" label-width="auto" style="max-width: 600px">
				<el-form-item label="账户余额：">
					<div class="account-flex">
						<span class="text-total">
							{{ isBalanceVisible ? '10000' : '****' }}
						</span>
						<span>元</span>
						<span @click="toggleBalanceVisibility" v-if="isBalanceVisible" class="iconfont icon-eye"></span>
						<span @click="toggleBalanceVisibility" v-else class="iconfont icon-eyeclose-fill"></span>
						<el-link type="primary" @click="handleButtonClick">我要提现</el-link>
					</div>
				</el-form-item>
				<el-form-item label="冻结金额：">
					<div class="account-flex">
						<span class="text-frozen">949.99</span>
						<span>元</span>
					</div>
				</el-form-item>
				<el-form-item label="可用余额：">
					<div class="account-flex">
						<span class="text-balance">949.99</span>
						<span>元</span>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bs-panel-body">
			<el-form :model="form" label-width="70px">
				<el-form-item label="充值金额">
					<div class="flex-center">
						<el-input-number v-model="form.price" :min="1" style="width: 130px;" :controls="false"
							@change="changeInput"></el-input-number>
						<span class="tip-label">元 最小金额为1元</span>
					</div>
				</el-form-item>
				<el-form-item label="充值方式">
					<el-radio-group v-model="form.paytype" @change="changeRadio">
						<el-radio-button value="alipay">
							<div class="pay-cell">
								<img src="@/assets/images/zfb.png" alt="" class="icon">
								<span>支付宝</span>
								<img src="@/assets/img/check.png" alt="" class="check" />
							</div>
						</el-radio-button>
						<el-radio-button value="wechat">
							<div class="pay-cell">
								<img src="@/assets/images/weixin.png" alt="" class="icon">
								<span>微信</span>
								<img src="@/assets/img/check.png" alt="" class="check" />
							</div>
						</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="large" @click="onSubmit" :disabled="isSubmitDisabled"
						style="width: 130px;">
						提交充值
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
	<el-dialog v-model="dialogVisible" title="在线充值" width="600" @close="handleClose">
		<div v-if="form.paytype == 'alipay'">
			<div class="pay-weixin">
				<div class="weixin-left">
					<div class="weixin-tip">距离二维码过期还剩<span class="num">{{second}}</span>秒,
						<br>过期后请刷新图片重新获取充值二维码。
					</div>
					<div class="weixin-code">
						<img src="@/assets/img/code.png" alt="" />
						<div class="weixin-mask" v-if="isRefresh" @click="refreshClick">
							<el-icon>
								<Refresh />
							</el-icon>
							<div class="mask-text">刷新二维码</div>
						</div>
					</div>
					<div class="weixin-block">
						<img src="@/assets/img/scan.png" alt="" />
						<div class="weixin-scan">
							请使用支付宝扫一扫<br />扫描二维码支付
						</div>
					</div>
				</div>
				<img src="@/assets/img/zhifubao_scan.png" alt="" class="weixin_scan" />
			</div>
		</div>
		<div v-if="form.paytype == 'wechat'">
			<div class="pay-weixin">
				<div class="weixin-left">
					<div class="weixin-tip">距离二维码过期还剩<span class="num">{{second}}</span>秒,
						<br>过期后请刷新图片重新获取充值二维码。
					</div>
					<div class="weixin-code">
						<img src="@/assets/img/code.png" alt="" />
						<div class="weixin-mask" v-if="isRefresh" @click="refreshClick">
							<el-icon>
								<Refresh />
							</el-icon>
							<div class="mask-text">刷新二维码</div>
						</div>
					</div>
					<div class="weixin-block">
						<img src="@/assets/img/scan.png" alt="" />
						<div class="weixin-scan">
							请使用微信扫一扫<br />扫描二维码支付
						</div>
					</div>
				</div>
				<img src="@/assets/img/weixin_scan.png" alt="" class="weixin_scan" />
			</div>
		</div>
	</el-dialog>
</template>
<style scoped lang="scss">
	.dialog-wx {
		text-align: center;
	}

	.wx-left {
		width: 320px;
		margin-left: auto;
		margin-right: auto;
	}

	.dg-wx {
		margin-bottom: 20px;
	}

	.dg-tip {
		margin-bottom: 10px;
	}

	.bs-panel-body {
		position: relative;
	}

	.bs-panel-body:first-child:before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #e5e5e5;
	}

	.bs-panel_tip {
		display: flex;
		align-items: center;
		background-color: #fefbe8;
		border: 1px solid #fbe69a;
		margin-bottom: 15px;
		padding: 10px 15px;
		border-radius: 4px;
		font-size: 12px;
	}

	.tip-label {
		white-space: nowrap;
		margin-left: 10px;
	}

	.pay-cell {
		display: flex;
		align-items: center;

		.icon {
			margin-right: 5px;
		}

		.check {
			margin-left: auto;
			width: 20px;
			height: 20px;
		}
	}





	.account-form .el-form-item {
		margin-bottom: 0;
	}

	.account-form {
		.text-total {
			font-size: 32px;
			color: #e68f36;
			margin-right: 5px;
		}

		.iconfont {
			margin: 0 10px;
		}

		.text-frozen {
			font-size: 18px;
			margin-right: 5px;
			color: #7b7b7b;
		}

		.text-balance {
			font-size: 18px;
			margin-right: 5px;
			color: #385eed;
		}
	}

	.dialog-wx {
		padding: 20px 30px 40px 30px;
	}

	.weixin-tip {
		text-align: center;
	}

	.weixin-tip .num {
		color: #FF3838;
	}

	.pay-weixin {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.weixin_scan {
		width: 220px;
	}

	.weixin-tip {
		font-size: 15px;
		margin-bottom: 5px;
	}

	.weixin-code {
		margin: 0 auto;
		position: relative;
		text-align: center;
		width: 150px;
	}

	.weixin-code img {
		width: 150px;
		height: 150px;
		display: block;
	}

	.weixin-left {
		padding: 0 10px;
	}

	.weixin-block {
		background-color: #fe7676;
		color: #fff;
		width: 150px;
		margin: 5px auto 0;
		padding: 5px 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.weixin-block img {
		margin-right: 5px;
	}

	.weixin-mask {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.weixin-scan {
		font-size: 12px;
	}


	.modal-header2 .modal-title {
		height: 20px;
		line-height: 20px;
		font-size: 14px;
		color: #17233d;
		font-weight: 700;
	}

	::v-deep .el-radio-button {
		margin-right: 20px;
		width: 130px;

		.el-radio-button__inner {
			display: block;
			border-left: 1px solid #dcdfe6;
			border-radius: 4px;
		}
	}
</style>